UI

Stack & positioned
   Column
      Row
         Text

Step1: maint.dart

empty stack layout

                         import 'package:flutter/material.dart';
                          import 'dart:math';
                          import 'package:flutter_svg_provider/flutter_svg_provider.dart';

                          void main() {
                            runApp(const MyApp());
                          }

                          class MyApp extends StatelessWidget {
                            const MyApp({super.key});

                            @override
                            Widget build(BuildContext context) {
                              return MaterialApp(
                                debugShowCheckedModeBanner: false,
                                home: LandingPage(),
                              );
                            }
                          }


                          class LandingPage extends StatelessWidget{
                            Widget build(BuildContext context) {
                              return Stack(

                              );

                            }
                          }

Step2: add bg image

1. Add children: [ ] to stack

2. add Positioned() to the children []

3. add image to the Positioned()

return Stack(
          children: [
              Positioned.fill(
                child: Image.asset(
                  'assets/svgs/landing.jpg',
                  fit: BoxFit.cover,
                ),
              ),
          ]
    );

  

output

Step3: add Text

1. There are 2 rows (1st row: text and 2nd row : button ). So use column layout

    
  return Stack(
          children: [
              Positioned.fill(
                child: Image.asset(
                  'assets/svgs/landing.jpg',
                  fit: BoxFit.cover,
                ),
              ),

            Positioned(

              child: Container(

                child: Column(

                  children: [
                   




                  ],
                ),
              ),
            ),
          ]
    );
  

2. add child elments to the column layout

  return Stack(
          children: [
              Positioned.fill(
                child: Image.asset(
                  'assets/svgs/landing.jpg',
                  fit: BoxFit.cover,
                ),
              ),

            Positioned(

              child: Container(

                child: Column(

                  children: [


                    const Text(
                      'Glass \nfor eye',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        inherit: false,
                        fontSize: 75,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),




                  ],
                ),
              ),
            ),
          ]
    );

  

output

3. There are 2 columns in the second line. So use row layout

  return Stack(
          children: [
              Positioned.fill(
                child: Image.asset(
                  'assets/svgs/landing.jpg',
                  fit: BoxFit.cover,
                ),
              ),

            Positioned(

              child: Container(

                child: Column(

                  children: [
                    const Text(
                      'Glass \nfor eye',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        inherit: false,
                        fontSize: 75,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),


                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                       
                       
                     
                      ],
                    ),


                  ],
                ),
              ),
            ),
          ]
    );
  

4. Add child elments to the row layout

  return Stack(
          children: [
              Positioned.fill(
                child: Image.asset(
                  'assets/svgs/landing.jpg',
                  fit: BoxFit.cover,
                ),
              ),

            Positioned(

              child: Container(

                child: Column(

                  children: [
                    const Text(
                      'Glass \nfor eye',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        inherit: false,
                        fontSize: 75,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),


                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        GestureDetector(
                          onTap: () {

                          },
                          child: Container(
                            padding: const EdgeInsets.symmetric(
                                vertical: 22, horizontal: 30),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(35),
                              color: GlassesColors.lightYellow,
                            ),
                            child: const Text(
                              'Start shopping',
                              style: TextStyle(
                                inherit: false,
                                fontSize: 22,
                                fontWeight: FontWeight.w500,
                                color: Colors.black,
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(width: 20),
                        Container(
                          padding: const EdgeInsets.all(20),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(40),
                            color: Colors.white,
                          ),
                          child: const Icon(
                            Icons.arrow_forward_rounded,
                            color: Colors.black,
                          ),
                        ),
                      ],
                    ),


                  ],
                ),
              ),
            ),
          ]
    );
  

output

Step 4: align text

1. place the text at the bottom

  Positioned(
      bottom: 1,
  

2. align the text to center

  Positioned(
    left: 0,
    right: 0,
  

Completed code

  import 'package:flutter/material.dart';
import 'dart:math';
import 'package:flutter_svg_provider/flutter_svg_provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LandingPage(),
    );
  }
}


class LandingPage extends StatelessWidget{
  Widget build(BuildContext context) {
    return Stack(
          children: [
              Positioned.fill(
                child: Image.asset(
                  'assets/svgs/landing.jpg',
                  fit: BoxFit.cover,
                ),
              ),

            Positioned(
              left: 0,
              right: 0,
              bottom: 1,
              child: Container(
                height: 340,
                //color: Colors.green.withOpacity(0.5),
                padding: const EdgeInsets.symmetric(horizontal: 30),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      'Glass \nfor eye',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        inherit: false,
                        fontSize: 75,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                    const SizedBox(height: 40),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        GestureDetector(
                          onTap: () {
                           
                          },
                          child: Container(
                            padding: const EdgeInsets.symmetric(
                                vertical: 22, horizontal: 30),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(35),
                              color: GlassesColors.lightYellow,
                            ),
                            child: const Text(
                              'Start shopping',
                              style: TextStyle(
                                inherit: false,
                                fontSize: 22,
                                fontWeight: FontWeight.w500,
                                color: Colors.black,
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(width: 20),
                        Container(
                          padding: const EdgeInsets.all(20),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(40),
                            color: Colors.white,
                          ),
                          child: const Icon(
                            Icons.arrow_forward_rounded,
                            color: Colors.black,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ]
    );

  }
}


class GlassesColors {
  static const lightYellow = Color.fromRGBO(253, 199, 110, 1);
  static const grey = Color.fromRGBO(195, 195, 194, 1);
  static const productListGrey = Color.fromRGBO(245, 245, 242, 1);
}